<template>
    <aside class="about">
        <div class="flash-sale">
            <!-- <div class="flash-sale" :style="banner"> -->
            <p class="btn-6">
                <span>{{ activity.title }}</span>
            </p>
            <ul>
                <li>
                    <span>原价：</span><var>{{ activity.originalPrice }}</var>
                </li>
                <li>
                    <span>抢购价：</span><var>{{ activity.buyingPrice }}</var>
                </li>
            </ul>
        </div>
        <div class="distance-end">
            <p>距离结束：</p>
            <ul>
                <li>{{ time.DD }}天</li>
                <li>{{ time.HH }}时</li>
                <li>{{ time.mm }}分</li>
                <li>{{ time.ss }}秒</li>
            </ul>
        </div>
        <div class="gift-bag">
            <ul>
                <li>{{ activity.introduction }}</li>
                <li><img src="../images/pic001.png" /></li>
            </ul>
        </div>
        <div class="service-items">
            <ul>
                <li v-for="(v, k) in activity.itemsList" :key="k">
                    <label>项目{{ toChinesNum(k + 1) }}</label>
                    <div>
                        {{ v.itemName }}{{ v.unit }}
                        <var> {{ v.total }} </var>元
                    </div>
                </li>
            </ul>
        </div>
        <div class="exchange-coupon">
            <h2>登记购买</h2>
            <ul :style="{ height: activity.status ? '140px' : '' }">
                <div>
                    <li class="item-header">登记车牌号参与活动</li>
                    <li class="item-content">
                        <p>
                            <span>车牌号：</span
                            ><input
                                type="text"
                                v-model="registerCarPlate.carPlate"
                                maxlength="10"
                                :disabled="activity.status"
                            />
                        </p>
                        <p>
                            <span>手机号：</span
                            ><input
                                type="text"
                                v-model="registerCarPlate.mobile"
                                maxlength="11"
                                onkeyup="value=value.replace(/[^\d\.]/g,'')"
                                :disabled="activity.status"
                            />
                        </p>
                        <p v-if="!activity.status">
                            <span>验证码：</span
                            ><input
                                type="text"
                                v-model="registerCarPlate.code"
                                maxlength="6"
                                onkeyup="value=value.replace(/[^\d\.]/g,'')"
                            />
                            <button @click="getCode" :disabled="isCode.status">
                                {{ isCode.label }}
                            </button>
                        </p>
                    </li>
                    <li class="item-footer" v-if="!activity.status">
                        <button @click="addCars" :disabled="activity.status">
                            活动报名
                        </button>
                    </li>
                </div>
            </ul>
        </div>
        <div class="activity-store">
            <h2>活动门店</h2>
            <ul>
                <div>
                    <li class="item-header">活动门店</li>
                    <li class="item-content">
                        <div>
                            <span>门店名称：</span
                            ><input
                                type="text"
                                v-model="activity.storeName"
                                readonly
                            />
                        </div>
                        <div>
                            <span>门店电话：</span
                            ><input
                                type="text"
                                v-model="activity.telePhone"
                                readonly
                            />
                        </div>
                        <div>
                            <span>门店地址：</span>
                            <p>{{ activity.address }}</p>
                            <img
                                src="../images/navigation.png"
                                @click="getLocations(activity)"
                                style="width: 24px; height: 24px"
                            />
                        </div>
                    </li>
                </div>
            </ul>
        </div>
        <div class="activity-remark">
            <h2>备注</h2>
            <ul>
                <div>
                    <li class="item-header">活动规则</li>
                    <li class="item-content" v-html="activity.rules"></li>
                </div>
            </ul>
        </div>
        <div class="activity-detail">
            <h2>产品详情</h2>
            <ul>
                <li class="item-content">
                    <template v-if="activity.video">
                        <video
                            poster="../images/video.png"
                            :src="baseurl + activity.video"
                            muted
                            controls
                        ></video>
                    </template>
                    <!-- <video src="~/images/1624781484854745.mp4" muted controls></video> -->
                </li>
                <li
                    class="item-content"
                    v-html="HTMLDecode(activity.details)"
                ></li>
            </ul>
        </div>
        <div class="activity-snapup">
            <h2>已参与活动抢购人数：{{ activity.countActivities }}人</h2>
            <table>
                <tr>
                    <th>人数</th>
                    <th>车牌号</th>
                    <th>领证状态</th>
                    <th>登记时间</th>
                </tr>
                <tr v-for="(v, k) in activity.carownerList" :key="k">
                    <td>{{ activity.countActivities - k }}</td>
                    <td>{{ v.carPlate }}</td>
                    <td>{{ v.status ? "已抢购" : "已登记" }}</td>
                    <td>{{ v.createTime }}</td>
                </tr>
            </table>
        </div>
        <div class="nav-icon">
            <!-- <img src="../images/music.png" alt="" class="music" /> -->
            <img
                src="../images/customer-service.png"
                alt=""
                class="customer-service"
                @click="businessCardImg(true)"
            />
            <!-- <img src="../images/coupon.png" alt="" class="coupon" /> -->
            <span class="rules" @click="activityDisRules(true)">
                活动规则
            </span>
        </div>
        <div class="cardImg" v-if="iscardImg">
            <ul>
                <li>
                    <p>联系方式: {{ activity.telePhone }}</p>
                    <span @click="businessCardImg(false)">❌</span>
                </li>
                <li>
                    <img :src="baseurl + activity.businessCardImg" />
                </li>
            </ul>
        </div>
        <div class="nav-rules" v-if="isRules">
            <ul>
                <li>
                    <h6>活动须知</h6>
                    <span @click="activityDisRules(false)">❌</span>
                </li>
                <li>
                    <p v-for="(v, k) in act_rules" :key="k">{{ v }}</p>
                </li>
            </ul>
        </div>
    </aside>
</template>

<script>
import { mapMutations, mapGetters } from "vuex";
import Request from "@/api/baseRequest.js";
import { mixin_Share } from "@/mixins/share.js";
import { mixin_Pay } from "@/mixins/pay.js";

export default {
    name: "About",
    components: {},
    mixins: [mixin_Share, mixin_Pay],
    data() {
        return {
            iscardImg: false,
            isRules: false,
            isCode: {
                status: false,
                count: 60,
                label: "获取验证码",
            },
            registerCarPlate: {
                activityId: "",
                carPlate: "",
                mobile: "",
                code: "",
                userId: "",
            },
            act_rules: [
                "1、活动参与资格：在活动期间该账户被系统认为无风险，进入活动页面即可获得参与资格，每个链接所属的直接推荐者每日参与次数有上限，用完后将提示参与活动无效，不能保证100%参与成功",
                "2、同一商品同时可能有多人同时参与活动按照活动规则先完成者先得。",
                "3、同一商品的活动随机需分1-N天参与完成(N=当天日期至活动截止日期天数)",
                "4、活动参与者必须为真实的、唯一的自然人并正常使用微信，不接受任何的作弊行为，若发现任何作弊行为，将判定为无效;并保留追究法律责任，后果自负",
                "5、平台将使用相关技术手段对用户行为进行价值分析，对于存在异常或造假等违规操作的用户，平台将取消其参与活动的资格，并扣除相应的奖励，不予结算，如未收到奖励，是网络波动或者微信风控多个因素所造成，属极少的正常情况，且活动主办方在法律范围内拥有最终解释权。",
                "6、每个用户仅可用一个自己有权的、真实的、合法的、有效的微信号/手机号/身份证号/手机设备参与活动。",
                "7、你若有下列任何一种行为或情况的，活动主办方有权单方面取消您的参与资格等(1)提供虚假信息的;(2)虚假交易或恶意破坏活动的;(3)以任何非自然人如:机器人软件、蜘蛛软件、爬虫软件、刷奖软件或其它任何自动方式、不正当手段等参与本活动的;(4)客观违背活动主办方特价商品吸引真实客户、集赞宣传活动的行为(5)利用本活动进行洗钱、套现、诈骗等违法犯罪行为的;(6)其他违反相关法规、本规则行为的。(7)有任何违反诚实信用、公序良俗、公平公正等原则行为的;",
                "8、因与本活动相关的规则解释、活动开展等事项产生争议的，用户同意与活动主办方友好协商解决，协商不成的，用户和活动主办方均同意将争议提交活动主办方当地人民法院诉讼解决，并适用中华人民共和国大陆地区法律",
                "9、用户知悉互联网存在诸多不确定性因素，因此理解并同意，如因不可抗力、网络、通讯线路故障，计算机大规模瘫癌及活动中在在大面积作弊行为等非活动主办方原因致使本活动出现异常情况或难以继续开展的，活动主办方有权采取包括但不限于通过各种方式消除异常情况或调整、暂停、取消本活动等措施。",
                "10、关于优惠券的使用和购买规则:",
                "(1)优惠券的购买金额以活动主办方设定的价格购买。",
                "(2)优惠券一经售出，您已知晓其不接受线上退款",
                "(3)关于优惠券的优惠政策以及使用请以每个优惠券的优惠备注说明为准。",
                "(4)优惠券仅限在线下门店转单使用。",
                "(5)关于优惠券的有效期请参照每个优惠券的备注说明为准。",
                "(6)优惠券不得退换折现，仅限本人使用。",
                "11、若参与活动中有任何疑问或建议，可进反馈页面反馈，会有工作人员及时联系并解决。",
            ],
        };
    },
    computed: {
        ...mapGetters([
            // 使用辅助函数 mapGetters
            "getActivity", // 映射 this.perStatus为 this.$store.getters.perStatus
        ]),
    },
    mounted() {
        this.$nextTick(() => {
            setTimeout(() => {
                this.getStateActivityList();
            }, 2000);
            setTimeout(() => {
                this.getShareInfo();
            }, 2000);
        });
    },
    methods: {
        ...mapMutations([
            // 使用辅助函数 mapMutations
            "changePayStatus", // 映射 this.changePayStatus(obj)为 this.$store.commit("ChangeStudScore", obj)
        ]),
        getStateActivityList() {
            var self = this;
            let { carPlate, mobile, payStatus, status } = self.getActivity;
            self.$emit("payStatusValue", payStatus);
            self.$emit("statusValue", status);

            self.$set(self.registerCarPlate, "carPlate", carPlate);
            self.$set(self.registerCarPlate, "mobile", mobile);
        },
        rules(o) {
            let { carPlate, mobile, code } = this.registerCarPlate;
            if (!carPlate) {
                this.$Alert({
                    title: "信息提示",
                    message: "车牌号为空，请输入车牌号",
                });
                return false;
            }
            if (!mobile) {
                this.$Alert({
                    title: "信息提示",
                    message: "手机号为空，请输入手机号",
                });
                return false;
            }
            if (!/^1[3456789]\d{9}$/.test(mobile)) {
                this.$Alert({
                    title: "信息提示",
                    message: "手机号码有误，请重填",
                });
                return false;
            }
            if (!o) {
                if (!code) {
                    this.$Alert({
                        title: "信息提示",
                        message: "验证码为空，请输入短信验证码",
                    });
                    return false;
                }
            }
            return true;
        },
        toChinesNum(num) {
            let changeNum = [
                "零",
                "一",
                "二",
                "三",
                "四",
                "五",
                "六",
                "七",
                "八",
                "九",
            ]; //changeNum[0] = "零"
            let unit = ["", "十", "百", "千", "万"];
            num = parseInt(num);
            let getWan = (temp) => {
                let strArr = temp.toString().split("").reverse();
                let newNum = "";
                for (var i = 0; i < strArr.length; i++) {
                    newNum =
                        (i == 0 && strArr[i] == 0
                            ? ""
                            : i > 0 && strArr[i] == 0 && strArr[i - 1] == 0
                            ? ""
                            : changeNum[strArr[i]] +
                              (strArr[i] == 0 ? unit[0] : unit[i])) + newNum;
                }
                return newNum;
            };
            let overWan = Math.floor(num / 10000);
            let noWan = num % 10000;
            if (noWan.toString().length < 4) noWan = "0" + noWan;
            return overWan
                ? getWan(overWan) + "万" + getWan(noWan)
                : getWan(num);
        },
        async addCars() {
            if (!this.rules()) return false;
            this.$set(
                this.registerCarPlate,
                "activityId",
                this.GetParam(window.location.href, "id")
            );
            this.$set(
                this.registerCarPlate,
                "userId",
                this.GetParam(window.location.href, "userId")
            );
            let params = {
                ...this.registerCarPlate,
                ...{ activityName: this.activity.title || "" },
            };
            const { code, msg } = await Request.addCars(params);
            if ([200, "200", "OK", 0].includes(code)) {
                await this.getStateActivityList();
                // this.handelPay(false, true);
                this.$router.push({
                    path: "/pay_info",
                    query: {
                        id: this.getActivity.id,
                        userId: this.getActivity.userId,
                        shareId: this.getActivity.shareId,
                        payStatus: false,
                        status: true,
                    },
                });
            }
            this.$Alert({ title: "活动报名", message: "活动报名" + msg });
        },
        // 获取手机验证码
        async getCode() {
            if (!this.rules(true)) return false;
            let params = {
                mobile: this.registerCarPlate.mobile,
            };
            const result = await Request.getCode(params);
            if ([200, "200", "OK", 0].includes(result.code)) {
                let countDown = setInterval(() => {
                    if (this.isCode.count > 0) {
                        this.$set(this.isCode, "status", true);
                        this.$set(
                            this.isCode,
                            "label",
                            `重新发送(${this.isCode.count})`
                        );
                        this.$set(this.isCode, "count", this.isCode.count - 1);
                    } else {
                        clearInterval(countDown);
                        this.$set(this.isCode, "status", false);
                        this.$set(this.isCode, "label", "获取验证码");
                    }
                }, 1000);
                this.$set(
                    this.registerCarPlate,
                    "userId",
                    this.GetParam(window.location.href, "userId")
                );
                this.$Alert({
                    title: "验证码",
                    message: "获取验证码" + result.msg,
                });
            }
        },
        businessCardImg(val) {
            const self = this;
            self.iscardImg = val;
        },
        activityDisRules(val) {
            const self = this;
            self.isRules = val;
        },
    },
    filters: {},
    destroyed() {
        clearInterval(this.timer);
    },
};
</script>

<style scoped lang="less">
// @import url("@/styles/btn6.less");
@import url("@/styles/about.less");

.item-content img {
    width: 100%;
    object-fit: fill;
}
</style>
